<template>
  <!-- 手机端 和 PC端 电脑端 首页设置 -->
  <div class="app-container" v-loading="loading">
    <el-form class="search-form-new" :model="queryParams" ref="queryForm" :inline="true" label-width="68px" v-hasPermi="['searchTenantID']">
      <el-form-item label="店铺" prop="tenantId">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="getAllConfig">搜索</el-button>
      </el-form-item>
    </el-form>
    <div class="setting-box">
      <template  v-for="configArea in config" >
        <div :key="configArea.id" class="area-item" v-if="configArea.area==1||configArea.area==2||configArea.area==3||configArea.area==4">
          <div class="top flex">
            <b class="tit">{{configArea.name}}</b>
            <div class="sort flex">
              <!-- <div >排序：</div>
            <el-input-number @change="sortChange($event,configArea)" v-model="configArea.sort"></el-input-number> -->
              <div style="margin-left:10px" v-if="configArea.area==1">
                <el-button icon="el-icon-plus" type="primary" size="small" @click="addACount(configArea)" class="zdy-btn zdy-btn-refresh">新增</el-button>
              </div>
            </div>
          </div>
          <div class="set-cont table_box">
            <el-table stripe :data="configArea.decorationInfos" style="width: 100%">
              <el-table-column label="名称" prop="name" />
              <el-table-column label="手机跳转链接" prop="mobileJump" v-if="configArea.area==1||configArea.area==4" />
              <el-table-column label="排序" prop="sort" v-if="!(configArea.area==3||configArea.area==4)" />
              <el-table-column label="图片" prop="img">
                <template slot-scope="scope">
                  <img style="height:32px" :src="scope.row.img" />
                </template>
              </el-table-column>
              <!-- <el-table-column label="备注"  prop="remark" show-overflow-tooltip/> -->
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button icon="el-icon-edit" type="edit" @click="editItem(scope.row)">编辑</el-button>
                  <el-button icon="el-icon-delete" type="del" v-if="configArea.area!=3&&configArea.area!=2" @click="delItem(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>



      </template>
    </div>
    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog"></addDialog>
  </div>
</template>

<script>
import shopPageSettingApi from "@/api/tenantApis/shopPageSetting";
import addDialog from "./phoneAddEditDialog.vue";
export default {
  name: "",
  components: { addDialog },
  data() {
    return {
      loading: false,
      config: [],
      queryParams: {
        type: 2,
        tenantId: "",
      },
    };
  },
  computed: {
    tenantList() {
      let arr = JSON.parse(JSON.stringify(this.$store.getters.tenantList));
      arr.unshift({
        tenantName: "管理端",
        tenantId: "1",
      });
      return arr;
    },
  },
  created() {
    if (!this.checkPermi(["searchTenantID"])) {
      this.getAllConfig();
    }
  },
  methods: {
    // 获取所有配置
    getAllConfig() {
      this.loading = true;
      shopPageSettingApi.decorationTypeList(this.queryParams).then((res) => {
        this.loading = false;
        if (res.rows.length) {
          this.config = res.rows.filter((r, i) => {
            return  r.area != 3 && r.area != 4;
          });
        }
      });
    },
    // 区域排序改变
    sortChange(e, configArea) {
      shopPageSettingApi.decorationTypeEdit(configArea).then((res) => {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.getAllConfig();
      });
    },
    // 新增
    addACount(configArea) {
      this.$refs.addDialog.open("add", configArea);
    },
    // 编辑
    editItem(row) {
      // 查看详情
      this.$refs.addDialog.open("edit", row);
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          shopPageSettingApi.decorationInfoDel(row.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getAllConfig();
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.area-item {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-bottom: 10px;
  .top {
    align-items: center;
    margin-bottom: 10px;
  }
  .tit {
    font-size: 16px;
    margin-right: 20px;
  }
  .sort {
    align-items: center;
    div {
      flex-shrink: 0;
    }
  }
}
</style>
